<template>
  <view style="display: flex; flex-wrap: wrap">
    <view v-for="(item, index) in imageList" :key="index" style="position: relative; width: 198rpx; height: 198rpx; display: inline-block">
      <image :src="item" class="imageitem" mode=""></image>
      <view class="del" @click="delimage(index)">
        <uni-icons type="closeempty" color="#fff" size="10"></uni-icons>
      </view>
    </view>
    <view class="upload" @click="openablum" v-if="uploadvisable">
      <uni-icons type="plusempty" color="#999999" size="30" style="margin-left: 50rpx; margin-bottom: 20rpx"></uni-icons>
      <view style="text-align: center; font-size: 24rpx; color: #999999">上传图片</view>
    </view>
  </view>
</template>

<script>
import config from '@/config/app.config';
import store from '@/store/index';
export default {
  props: ['coverimglength', 'swiperimgcount', 'weixinimg', 'weixingrounp', 'image'],

  data() {
    return {
      imageList: [],
      uploadvisable: true
    };
  },
  methods: {
    aa(e) {
      return typeof e;
    },
    // 打开相册

    openablum() {
      uni.chooseImage({
        count: 1,
        sourceType: ['camera', 'album'],
        success: async (res) => {
          console.log(res);
          if (res.tempFiles[0].size > 5 * 1024 * 1024) {
            uni.showToast({
              title: this.$t('dating.picLimit', {
                value: 5
              }),
              icon: 'none'
            });
            return;
          }
          uni.showLoading();
          const result = await this.uploadFilePromise(res.tempFilePaths[0]);
          uni.hideLoading();
          console.log('上传时返回的-----', result);
          this.imageList.push(result.url);
          this.$emit('imglist', this.imageList);
        }
      });
      // uni.chooseImage({
      //   count: 1,
      //   mediaType: ['image'],
      //   sourceType: ['album', 'camera'],
      //   sizeType: ['original', 'compressed'],
      //   camera: 'front',
      //   success: (res) => {
      //     console.log('--选择图片之后-----', res);
      //     // 选择玩之后调用上传图片方法
      //     uni.showLoading({
      //       title: '正在上传图片'
      //     });
      //     uni.uploadFile({
      //       url: 'https://omlook.com/imolapi/system/user/profile/avatar',
      //       filePath: res.tempFiles[0].tempFilePath,
      //       name: 'file',
      //       formData: {
      //         token: JSON.parse(uni.getStorageSync('vuex')).token
      //       },
      //       success: (res2) => {
      //         console.log('上传完成时的回调---', JSON.parse(res2.data));
      //         const data = JSON.parse(res2.data);
      //         if (data.code == 1) {
      //           uni.hideLoading();
      //           this.imageList.push(data.data.fullurl);
      //           console.log(this.imageList);
      //         } else {
      //           uni.hideLoading();
      //           uni.showToast({
      //             title: '图片上传失败',
      //             icon: 'none'
      //           });
      //         }
      //       }
      //     });
      //   }
      // });
    },
    //上传路径
    uploadFilePromise(url) {
      console.log(url);
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: config.server + '/app/oss/upload', // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'file',
          header: {
            Authorization: `Bearer ${store.state.token}`,
            version: config.version
          },
          formData: {
            user: 'upload'
          },
          success: (res) => {
            const resp = JSON.parse(res.data);
            setTimeout(() => {
              resolve(resp.data);
            }, 1000);
          }
        });
      });
    },
    // 删除图片
    delimage(index) {
      console.log(index);
      this.imageList.splice(index, 1);
      console.log(this.imageList);
      // uni.uploadFile({
      //   url: 'https://activity.jiangkukeji.cn/api/common/upload',
      //   files: this.imageList
      // });
      this.uploadvisable = true;
    }
  },
  computed: {}
};
</script>

<style lang="less">
.upload {
  box-sizing: border-box;
  display: inline-block;
  width: 160rpx;
  height: 160rpx;
  background: #f8f8f8;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  padding-top: 30rpx;
}
.imageitem {
  box-sizing: border-box;
  width: 160rpx;
  height: 160rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.del {
  box-sizing: border-box;
  position: absolute;
  right: 15rpx;
  top: -15rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 35rpx;
  background-color: red;
}
</style>
